{% extends "base_lang.html" %}

{% block title %}Sprunki Phase 3 - 인터랙티브 음악 창작 게임{% endblock %}

{% block description %}Sprunki Phase 3에서 리듬과 창의성이 만나는 혁신적인 음악 창작 게임을 경험하세요.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Sprunki Phase 3에 오신 것을 환영합니다</h1>
            <p class="text-xl text-white mb-8">창작하고, 믹스하고, 전에 없던 인터랙티브 음악을 경험하세요</p>
            <a href="#play" class="bg-white text-primary px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition duration-300">
                지금 시작하기
            </a>
        </div>
    </div>
</section>

<!-- Game Section -->
<section id="play" class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative">
            <iframe src="{{ config.GAME_URL }}" 
                class="w-full rounded-lg shadow-xl" 
                style="height: 600px;"
                id="game-iframe" 
                frameborder="0" 
                allowfullscreen>
            </iframe>
            <button onclick="toggleFullscreen()" class="absolute top-4 right-4 bg-white dark:bg-gray-700 p-2 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600">
                <i class="fas fa-expand text-indigo-600 dark:text-indigo-400"></i>
            </button>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-16 bg-gray-50 dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-12">주요 기능</h2>
        <div class="grid md:grid-cols-3 gap-8">
            {% for feature in features %}
            <div class="text-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                <div class="text-4xl text-primary mb-4">
                    <i class="{{ feature.icon }}"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">{{ feature.title }}</h3>
                <p class="text-gray-600 dark:text-gray-300">{{ feature.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 기타 콘텐츠... -->
{% endblock %} 